<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@ include file="/WEB-INF/views/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
  <script type="text/javascript">
	$(function(){
		 $('#dd').dialog({
             title: "提交认证",
             closed:true,
             modal: true, //dialog继承自window，而window里面有modal属性，所以dialog也可以使用
             toolbar: [{
					text:'提交',
				iconCls:'icon-ok',
				handler:function(){
					$('#ff').form('submit',{
						onSubmit:function(){
							var isValid = $(this).form('validate');
							return isValid;
						},
						success: function(){
							$.messager.show({
								title:"Success！",
								msg:"恭喜您，操作成功！"
							})
							$("#tips").html("您已提交认证，请勿重复提交！");
							$("#dd").dialog({toolbar:[]});
						}
					},"json");
				
				}
			},{
				text:'Cancel',
				iconCls:'icon-cancel',
				handler:function(){
					$('#dd').dialog('close');
				}
			}],
			onClose: function() {
				$('#ff').form('clear');
			}
         });
		$.post("${cs}/cs/credit/applyInf",function(a){
			
			if(a.id!=null){
				if(a.state==1){
					$("#tips").html("您已提交认证，请勿重复提交！");
					$("#dd").dialog({toolbar:[]});
				}
				$("#phone").numberbox("setValue",a.phone);
				$("#email").textbox("setValue",a.email);
				$("#imghead").attr("src","${cs}"+a.materialurl);
			}else{
				$("#tips").html("您还未进行信贷认证，请提交资料进行认证！");
			}
			$('#dd').dialog("open");
			if(a.state==2){
				$.messager.alert('认证失败！',a.msg, 'info');
			}
			$("#tips").html("您还未进行信贷认证，请提交资料进行认证！");
		},"json");
		 initCombox();
	    
		$("#btn_search").click(function(){
			var param = $("#searchForm").serializeJson();

			});
		});
	
	function initCombox() {
		$('#sex').combobox({
			 valueField:'id',
			 textField:'name',
			 data:[{"id":"男","name":"男"},{"id":"女","name":"女"}]
			 }),
		 $('#roleid').combobox({
			 url: "${cs}/cs/user/role/combobox",
			 valueField:'id',
			 textField:'name',
			 loadFilter : function (r){
				 var data=[{"name": '全选', "id": '0'}];
				 for(var i=0;i<r.length;i++){
					 data.push({"name":r[i].name,"id":r[i].id});
				 }
				 return data;
			 },
	   		 onLoadSuccess: function(data){
	            if(data.length<=0) {
	            	 $("#roleid").combobox('loadData',[{"siteName": '请选择', "id": '-1'}]);
	             }
	            $("#roleid").combobox('select',data[0].id);	
	         }
		 });
	}
	function previewImage(file)
    {
      var MAXWIDTH  = 400; 
      var MAXHEIGHT = 280;
      var div = document.getElementById('preview');
      if (file.files && file.files[0])
      {
          div.innerHTML ='<img id=imghead>';
          var img = document.getElementById('imghead');
          img.onload = function(){
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            img.width  =  rect.width;
            img.height =  rect.height;
//             img.style.marginLeft = rect.left+'px';
            img.style.marginTop = rect.top+'px';
          }
          var reader = new FileReader();
          reader.onload = function(evt){
       	   img.src = evt.target.result;}
          reader.readAsDataURL(file.files[0]);
      }
      else //IE
      {
        var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
        file.select();
        var src = document.selection.createRange().text;
       
        div.innerHTML = '<img id=imghead>';
        var img = document.getElementById('imghead');
        img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
        //var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
        var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT,400,280);
        //status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
        div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin: 0px;"+sFilter+src+"\"'></div>";
      }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight )
        {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;
            
            if( rateWidth > rateHeight )
            {
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            }else
            {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
     $.extend($.fn.validatebox.defaults.rules, {     
		    phone:{     
		        validator: function(value,param){
		        	var flag=/^1[3|4|5|8][0-9]\d{4,8}$/.test(value);
		        	return flag==true?true:false; 
		        },     
		        message: '手机号不合法!'    
		    },
		    equalTo: { validator: function (value, param) { return $(param[0]).val() == value; }, message: '两次输入密码不一致！' }
     	}); 
    </script>
</head>
<body style="padding:0 4px; margin:0;  overflow: hidden; ">
<div class="easyui-layout" style="width:100%;height:100%;" data-options="fit:true">
		<div title="信贷认证" data-options="region:'north'" style="height:70px" align="center">
			<span id="tips" style="font-size:26px;"></span>
		</div>
				<div data-options="region:'center'" >
					<table id="dg" >
					</table>
				</div>
				<div id="dd" title="新增用户"  style="width:600px;height:500px; text-align:center;top:75px;" data-options="closed:true">
				    <form id="ff" method="post" action="${cs}/cs/credit/saveAuthentication" enctype=multipart/form-data>
				    	<table cellpadding="5"  style="text-align: left;">
				    		<tr>
				    			<td>邮箱:</td>
				    			<td><input class="easyui-textbox" type="text" id="email"  name="email" data-options="required:true" validType="email" missingMessage="邮箱不能为空"></input></td>
				    		</tr>
				    		<tr>
				    			<td>手机:</td>
				    			<td><input class="easyui-numberbox" type="text"  id="phone" name="phone" data-options="required:true,validType:['length[11,11]','phone']"  missingMessage="手机号不能为空！"></input></td>
				    		</tr>
				    		<tr>
				    			<td>认证材料:</td>
				    			<td>
				    				<input id="fb" type="text" class="easyui-filebox" name="file"  style="width:300px"> 
				    				<script type="text/javascript">
					    				$('#fb').filebox({ 
					    					 buttonText: 'Choose File', 
					    					 buttonAlign: 'left',
					    					 onChange: function(newValue,oldValue){
					    						 if(newValue == "")return false;
					    						 previewImage(document.getElementsByName("file")[0]);
					    					 }
					    					});
				    				</script>
				    			</td>
				    		</tr>
				    		<tr>
				    		<td>认证材料:</td>
								<td >
								<div id="preview">
									<img  alt="认证材料"   id="imghead"  border=0  src="" width="400px" height="280px"/>
									</div>
								</td>
							</tr>
				    	</table>
				    </form>
			   </div>
		</div>
</body>
</html>